<template>
  <div class="page">
    <NavBar title="个人中心" :isBack="isBack" />
    <div class="main">
      <div class="form">
        <div class="item">
          <div>头像</div>
          <div class="_r">
            <img
              class="photo_default"
              src="../assets/img/photo_default@2x.png"
              alt=""
            />
            <img class="img" src="../assets/img/right.png" alt="" />
          </div>
        </div>
        <div class="item">
          <div>手机号</div>
          <div class="_r">
            <span>{{ username }}</span>
            <img class="img" src="../assets/img/right.png" alt="" />
          </div>
        </div>
      </div>
      <div class="btn" @click="logout">退出登录</div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import NavBar from "../components/NavBar.vue";
import { showDialog ,showToast,showConfirmDialog} from "vant";
const router = useRouter();
const isBack = ref(true);
const username = ref("");
const logout = () => {
  showConfirmDialog({
    title: "提示",
    confirmButtonColor: "#1e80ff",
    message: "确认退出吗？",
  })
    .then(() => {
      // on confirm
       showToast("退出成功");
       localStorage.setItem("h5_token",'')
      router.back();
    })
    .catch(() => {
      // on cancel
    });
};
onMounted(() => {
  console.log("mounted");
  username.value = localStorage.getItem("h5_token");
  console.log(router);
});
</script>
<style scoped lang="less">
.page {
  width: 100%;
  min-height: 100vh;
  background: #f8f8f8;
}
.btn {
  width: 345px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 8px;
  font-size: 15px;
  line-height: 50px;
  margin: 30px auto;
  text-align: center;
  color: #3278f9;
}
.form {
  background: #fff;
  border-radius: 5px;
  margin: 15px;
  padding: 15px;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    .photo_default {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    ._r {
      display: flex;
      align-items: center;
      .img {
        width: 24px;
        height: 24px;
        margin-left: 10px;
      }
    }
  }
}
</style>
